import Vue from 'vue'
//注册'v-animate'  当元素出现在可视范围时添加类名触发动效样式
Vue.directive('animate', {
	inserted: function (el, binding) {
		Vue.nextTick(function () {
			// 查看该元素是否脱离文档流
			// 聚焦元素
			binding.addClass = () => {
				let observer = new IntersectionObserver(
					([entry]) => {
						if (entry.isIntersecting) {
							setTimeout(() => {
								if (el.className.indexOf(binding.value) == -1) {
									// 初次还未绑定过，则新增类名(注意：下面单引号中间是一个空格！！！)
									el.className = binding.value + ' ' + el.className
								}
								if (binding.addClass) {
									window.removeEventListener('scroll', binding.addClass)
								}
							}, 300)
						}
					},
					{ threshold: 0.1 } // 可见度比例触发
				)
				observer.observe(el)
			}
			window.addEventListener('scroll', common.throttle(binding.addClass, 300), true)
			binding.addClass()
		})
	},
	unbind: function (el, binding) {
		if (binding.addClass) {
			window.removeEventListener('scroll', common.throttle(binding.addClass, 300))
		}
	},
})
